<template>
  <div>
    <h3>数据双向绑定</h3>
    <div>
      <!-- <div>
        <h3>v-model数据双向绑定</h3>
        <input type="text" v-model="msg" />
        <p>{{ msg }}</p>
      </div> -->
      <!-- 原理就是自己的value单项绑定 但是@input事件修改value绑定的值 -->
      <!-- <div>
        <h3>v-model数据双向绑定实现原理</h3>
        <input type="text" :value="msg" @input="msg = $event.target.value" />
        <p>{{ msg }}</p>
      </div> -->
      <div>
        <h3>使用v-model本质实现数据的双向绑定</h3>
        <!-- 自定义事件函数默认接受的参数是$event是子组件的传参 -->
        <Child :value="msg" @input="msg = $event" />
        <!-- 这就是v-model的实现原理 -->
      </div>
      <div>
        <h3>v-model</h3>
        <div><Child v-model="msg"></Child></div>
      </div>
    </div>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "Vmodel",
  data() {
    return {
      msg: 8,
    };
  },
  components: { Child },
};
</script>

<style>
</style>